<template>
	<view>
		<view class="" v-if="type == 'checkbox'">
			<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
				<u-checkbox v-model="item.checked" :active-color="theme.bgColor" v-for="(item, index) in list" :key="index" :name="item.value">{{ item.lable }}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="" v-else>
			<u-radio-group v-model="value" @change="radioGroupChange">
				<u-radio v-for="(item, index) in list" :active-color="theme.bgColor" :key="index" :name="item.value">{{ item.lable }}</u-radio>
			</u-radio-group>
		</view>
	</view>
</template>

<script>
export default {
	name: 'fa-check-radio',
	props: {
		faList: {
			type: [Object, Array],
			default: []
		},
		type: {
			type: String,
			default: 'checkbox'
		},
		field:{
			type:String,
			default:''
		},
		checkValue:{
			type:[String,Array],
			default:''
		}
	},
	watch: {
		faList: {
			immediate: true,
			handler(val) {
				let value = [];
				if(this.type == 'checkbox'){
					value = this.checkValue?this.checkValue.split(','):[];
				}else{
					this.value = this.checkValue;
				}				
				let list = [];
				for (let i in val) {
					list.push({
						lable: val[i],
						value: i,
						checked: value.indexOf(i) != -1
					});
				}
				this.list = list;
			}
		}
	},
	data() {
		return {
			radioCheckWidth: 'auto',
			radioCheckWrap: false,
			list: [],
			value:''
		};
	},
	methods: {
		checkboxGroupChange(e) {		
			this.$emit('change', {field:this.field,value:e.join(',')});
		},
		radioGroupChange(e){			
			this.$emit('change', {field:this.field,value:e});
		}
	}
};
</script>

<style lang="scss"></style>
